<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c"   uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户列表</title>
<style type="text/css">
	table{
		width:800px;
	}
	table,tr,th,td{
		border: 1px solid #ff0000;
		border-collapse:collapse;
	}
</style>
</head>
<body>

<form action="${ctx}/user/list" method="post">
<table>
	<tr>
		<th>编号</th>
		<td><input type="text" name="id" value="${user.id eq 0 ? '' : user.id}" size="30" /></td>
		<th>用户</th>
		<td><input type="text" name="name" value="${user.dataMap.name}"  size="30" /></td>
	</tr>
		<tr>
		<th>年龄</th>
		<td><input type="text" name="start_age" value="${user.dataMap.start_age}" size="20" /> 至
			<input type="text" name="end_age"  value="${user.dataMap.end_age}"  size="20" />
		</td>
		<th colspan="2"><input type="submit" value="查询" /></th>
	</tr>
</table>
</form>	
<a href="${ctx}/user/input">添加</a>
<table>
	<tr>
		<th>序号</th>
		<th>ID</th>
		<th>用户</th>
		<th>密码</th>
		<th>年龄</th>
		<th>操作</th>
	</tr>
	<c:forEach var="user" items="${userList}" varStatus="vs">
		<tr>
			<td>${vs.count}</td>
			<td>${user.id}</td>
			<td>${user.name}</td>	
			<td>${user.pass}</td>
			<td>${user.age}</td>
			<td>
				<a href="${ctx}/user/input?id=${user.id}">修改</a>
				<a href="#" onclick="deleteUser(${user.id})">删除</a>
			</td>
		</tr>
	</c:forEach>
</table>
<br/>
<form id="pageForm" action="${ctx}/user/list" method="post">
<table>
	<tr>
		<td align="center">
			共${page.totalCount}条记录
			<a href="${ctx}/user/list?requestPage=${page.firstPage}&pageSize=${page.pageSize}">首页</a>
			<c:if test="${page.currentPage eq page.firstPage}" >
				<span style="color:#808A87">上一页</span>
			</c:if>
			<c:if test="${page.currentPage ne page.firstPage}" >
				<a href="${ctx}/user/list?requestPage=${page.previousPage}&pageSize=${page.pageSize}">上一页</a>
			</c:if>
			
			<c:if test="${page.currentPage eq page.lastPage}" >
				<span style="color:#808A87">下一页</span>
			</c:if>
			<c:if test="${page.currentPage ne page.lastPage}" >
				<a href="${ctx}/user/list?requestPage=${page.nextPage}&pageSize=${page.pageSize}">下一页</a>
			</c:if>
			<a href="${ctx}/user/list?requestPage=${page.lastPage}&pageSize=${page.pageSize}">尾页</a>	
			每页${page.pageSize}条
			当前${page.currentPage}页/共${page.pageCount}页			
			每页<select id="pageSize" name="pageSize" onchange="changePageSize()">
				 <option value="5"  ${page.pageSize eq 5 ? "selected='selected'" : ""}>5</option>
				 <option value="10" ${page.pageSize eq 10 ? "selected='selected'" : ""}>10</option>
				 <option value="20" ${page.pageSize eq 20 ? "selected='selected'" : ""}>20</option>
				 <option value="30" ${page.pageSize eq 30 ? "selected='selected'" : ""}>30</option>
			   </select>条
			第<input type="text" style="text-align:center" name="requestPage" value="${page.currentPage}" size="1" />页
			<input type="submit" value="跳转" />
 		</td>
	</tr>
</table>
</form>
<script>
	//删除数据 ==> js
	function deleteUser(id){
		if(confirm("确定要删除当前数据？")){
			location.href="${ctx}/user/delete?id=" + id;
		}
	}
	
	function changePageSize(){
		var pageSize = document.getElementById("pageSize").value;
		location.href="${ctx}/user/list?requestPage=${page.currentPage}&pageSize=" + pageSize;
	}
	
</script>

</body>
</html>